<!DOCTYPE html>
<html>
<#include "_inc/constants.ftl" />
<head>
    <title></title>
    <!-- For-Mobile-Apps-and-Meta-Tags -->
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords"
          content="Fortune Estates Widget Responsive, Login Form Web Template, Flat Pricing Tables, Flat Drop-Downs, Sign-Up Web Templates, Flat Web Templates, Login Sign-up Responsive Web Template, SmartPhone Compatible Web Template, Free Web Designs for Nokia, Samsung, LG, Sony Ericsson, Motorola Web Design"/>
    <link href="css/bootstrap.css" type="text/css" rel="stylesheet" media="all">
    <link rel="stylesheet" href="css/ken-burns.css" type="text/css" media="all"/>
    <!--//pop-up-box -->
    <!-- web-fonts -->
    <link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic'
          rel='stylesheet' type='text/css'>
    <!-- //web-fonts -->
    <link rel="stylesheet" href="css/weui.min.css">
    <link rel="stylesheet" href="css/jquery-weui.css">
    <link rel="stylesheet" href="css/demos.css">
    <link rel="stylesheet" href="css/bootstrap.css">
    <style>

    </style>
</head>

<body>
<div class="container">
    <h4 style="text-align: center;">请扫码支付</h4>
    <div id="qrcode" style="width: 500px;margin: auto;" class="container"></div>
</div>

<!-- js -->
<script src="js/jquery.min.js"></script>
<!-- //js -->
<script src="js/jquery.magnific-popup.js" type="text/javascript"></script>
<script src="js/classie.js"></script>
<script src="js/jquery.nicescroll.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/fastclick.js"></script>
<script src="js/jquery-weui.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="js/utils.js"></script>
<script src="js/qrcode.min.js"></script>
<script>
    $(function () {
        var qrcode = new QRCode(document.getElementById("qrcode"), {
            text: "${ code_url }",
            width: 500,
            height: 500,
            colorDark: "#000000",
            colorLight: "#ffffff",
            correctLevel: QRCode.CorrectLevel.H
        });


        /**
         * 标志位，标志成功还是失败（超出60S没返回默认失败）
         */
        var sign = false;

        var websocket = null;

        var timer = setTimeout(function () {
            var param = {};
            param.accesstoken = '${ accesstoken }';
            param.mach = '${ mach }';
            $.submitFormPost('/weixin.do', param, 'POST');

            console.log("60s！！！");

            websocket.close();
        }, 60 * 1000);

        //判断当前浏览器是否支持WebSocket
        if ('WebSocket' in window) {
            websocket = new WebSocket("${ wsUrl }?machid=" + "${ mach }");
        } else {
            alert('当前浏览器 Not support websocket')
        }

        //连接发生错误的回调方法
        websocket.onerror = function () {
            console.log("websocket error")
        };

        //连接成功建立的回调方法
        websocket.onopen = function () {
            console.log("websocket open")
        };

        //接收到消息的回调方法
        websocket.onmessage = function (event) {
            var jsonResp = JSON.parse(event.data);

            var orderid = '${ orderid }';

            var param = {};

            if ("SUCCESS" == jsonResp.status && orderid == jsonResp.orderid) {
                sign = true;

                param.orderid = orderid;
                param.state = "SUCCESS";
                websocket.send(JSON.stringify(param));

                console.log("成功！！");

                //$('body').html("支付成功，5 秒后返回主页面");
                //websocket.close();
            }else{

                param.orderid = orderid;
                param.state = "FAILURE";
                websocket.send(JSON.stringify(param));

                console.log("失败！！");
                //$('body').html("订单出错，服务器稍后退款。5 秒后返回主页面");
                //websocket.close();
            }

            param = {};
            param.accesstoken = '${ accesstoken }';
            param.mach = '${ mach }';
            window.localStorage.removeItem('list${mach}');
            $.submitFormPost('/weixin.do', param, 'POST');
        };

        //连接关闭的回调方法
        websocket.onclose = function () {
            console.log("websocket close")
        };

        //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        window.onbeforeunload = function () {
            websocket.close();
        }

    });


</script>
</body>
</html>